<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cls {
      background-color: red;
    }
  </style>
</head>
<body>
  <input type="button" id="btn" value=" 点我 "> <br>
  <input type="text" id="txt">
  <script>
    // 根据id获取元素 封装成函数
    function my$(id) {
      return document.getElementById(id);
    }

    // 样式操作
    // 1 使用类样式
    // my$('btn').onclick = function () {
    //   my$('txt').className = 'cls';
    // }
    
    
    // 2 使用style
    my$('btn').onclick = function () {
      // my$('txt').style 
      var txt = my$('txt');
      // console.log(txt.style);
      // 样式属性  background-color
      // DOM中style的属性  backgroundColor
      txt.style.backgroundColor = 'red';
    }

    var person = {
      name: 'zs',
      age: 18,
      dog: {
        name: 'puppy',
        age: 2
      }
    }
    console.log(person.dog.name);
  </script>
</body>
</html>
